<template>
	<div class="my-goods-list">
		<MyTable :arr="list">
		<template #head>
			    <th>#</th>
				<th>商品名称</th>
				<th>价格</th>
				<th>标签</th>
				<th>操作</th>
		</template>
		<template #body="scope">
			    <td>{{ scope.item.id }}</td>
				<td>{{ scope.item.goods_name }}</td>
				<td>{{ scope.item.goods_price }}</td>
				<td>
					<div>
						<!-- 输入框 -->
						<input style="width: 150px" class="tag-input form-control" type="text" @blur="scope.item.inputVisible = false" v-if="scope.item.inputVisible" v-focus v-model="scope.item.inputValue" @keyup.enter="add(scope.item)"/>
						<button class="btn btn-primary btn-sm add-tag" @click="scope.item.inputVisible = true" v-else>
							+Tag
						</button>

					</div>
					<span class="badge rounded-pill bg-warning text-dark" v-for="(str,ind) in scope.item.tags" :key="ind">{{ str }}</span>
				</td>
				<td><button class="btn btn-danger btn-sm">删除</button></td>
		</template>
	</MyTable>
	</div>
</template>

<script>
// axios
import axios from 'axios'
import MyTable from '@/components/MyTable.vue';
	// 接口：GTE  https://www.escook.cn/api/goods

	export default {
		data() {
			return {
				list:[]
			};
		},
		components:{
			MyTable
		},
		async created(){
			this.getList()
		},
		methods:{
			async getList(){
				const {data:res} = await axios.get('https://www.escook.cn/api/goods')
			console.log(res);
			this.list = res.data
			},
			add(obj){
				if(obj.inputValue.trim().length <= 0){
					alert('请输入内容')
				}else{
					obj.tags.push(obj.inputValue)
				    obj.inputValue = ''
				}
			}
		},
		// 自定义指令
		directives:{
			focus:{
				inserted(val){
					val.focus()
				}
			}
		}
	};
</script>

<style>
</style>
